<template>
  <div @resize="handleResize">
    <el-row :gutter="24">
      <el-col :span="24" class="el-mb">
        <el-card :bordered="false" shadow="never" class="dashboard-console-visit">
          <div>
            <el-row justify="center" align="middle">
              <el-col :span="8" class="card-title">
                <q-avatar class="bg-blue-1" size="md" text-color="primary">
                  <i-ep-trend-charts />
                </q-avatar>
                <h6 class="el-pl-8">订单</h6>
              </el-col>
              <el-col :span="16" class="el-text-right">
                <el-radio-group v-model="visitDate" type="button" class="el-mr-8" @change="handleChangeVisitType">
                  <el-radio-button value="thirtyday">30天</el-radio-button>
                  <el-radio-button value="week">周</el-radio-button>
                  <el-radio-button value="month">月</el-radio-button>
                  <el-radio-button value="year">年</el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
          <echarts-from ref="visitChart" :单项="单项" v-if="单项"></echarts-from>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { 订单图表 } from '@/api/商城';
import echartsFrom from '@/components/echarts/index.vue';

// 响应式数据
const visitDate = ref('thirtyday');
const 单项 = ref(null);
const visitChart = ref(null);

// 统计数据获取
const getStatistics = async () => {
  try {
    const res = await 订单图表({ cycle: visitDate.value });
    console.log(`订单图表 res 👉`, res)
    const obj = res.data || {};

    obj.yAxisData = [
      {
        type: 'value',
        name: '金额',
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { color: '#7F8B9C' },
        splitLine: { show: true, lineStyle: { color: '#F5F7F9' } }
      },
      {
        type: 'value',
        name: '数量',
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { color: '#7F8B9C' },
        splitLine: { show: true, lineStyle: { color: '#F5F7F9' } }
      }
    ];
    const series = obj.series
    series.forEach(element => {
      element.emphasis = { focus: "series" }
    });
    单项.value = obj;

  } catch (error) {
    ElMessage.error(error.msg || '获取订单统计数据失败');
  }
};

// 时间类型改变事件
const handleChangeVisitType = (e) => {
  console.log(`e 👉`, e)
  getStatistics();
};

// 窗口大小改变事件
const handleResize = () => {
  if (单项.value && visitChart.value) {
    visitChart.value.handleResize();
  }
};

// 组件挂载时获取数据
onMounted(() => {
  getStatistics();
});
</script>

<style lang="scss" scoped>
.dashboard-console-visit {
  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}

.el-text-right {
  text-align: right;
}

.el-pl-8 {
  padding-left: 8px !important;
}

.card-title {
  display: flex;
  align-items: center;

  ::v-deep .el-avatar--small {
    background-color: var(--prev-color-primary-light-9) !important;
  }
}
</style>